<template>
	<view class="container">
		<view class="item" @click="toUserinfo()">
			<view class="item-left">
				<image src="/static/icon/setting/1.png"></image>
			</view>
			<view class="item-right">
				<text>个人信息</text>
				<text>头像、昵称、手机号等</text>
			</view>
		</view>
<!--		<view class="item">-->
<!--			<view class="item-left">-->
<!--				<image src="/static/icon/setting/2.png"></image>-->
<!--			</view>-->
<!--			<view class="item-right">-->
<!--				<text>账户与安全</text>-->
<!--				<text>修改密码、修改手机号、账号绑定管理</text>-->
<!--			</view>-->
<!--		</view>-->
<!--		<view class="item">-->
<!--			<view class="item-left">-->
<!--				<image src="/static/icon/setting/3.png"></image>-->
<!--			</view>-->
<!--			<view class="item-right">-->
<!--				<text>支付设置</text>-->
<!--			</view>-->
<!--		</view>-->
<!--		<view class="item">-->
<!--			<view class="item-left">-->
<!--				<image src="/static/icon/setting/4.png"></image>-->
<!--			</view>-->
<!--			<view class="item-right">-->
<!--				<text>开启通知</text>-->
<!--			</view>-->
<!--		</view>-->
<!--		<view class="item" @click="toProblem()">-->
<!--			<view class="item-left">-->
<!--				<image src="/static/icon/setting/5.png"></image>-->
<!--			</view>-->
<!--			<view class="item-right">-->
<!--				<text>常见问题</text>-->
<!--			</view>-->
<!--		</view>-->
		<view class="btn" v-if="userInfo.id">
			<button @click="toLogout">退出登录</button>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
	export default {
		data() {
			return {

			};
		},
    computed: {
      ...mapGetters(['userInfo'])
    },
		methods: {
			toUserinfo() {
				uni.navigateTo({
					url: "/pages/mine/info"
				})
			},
      toLogout() {
        uni.showModal({
          title: '提示',
          content: '确定退出登录?',
          success: (res) => {
            if (res.confirm) {
              this.$store.commit('LOGOUT')
              uni.switchTab({
                url: "/pages/index/index"
              })
            }
          }
        })
      },
			toProblem() {
				uni.navigateTo({
					url: "/pages/setting/problem"
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F8F9FA;
	}
</style>

<style lang="scss" scoped>
	.container {
		margin: 30rpx;

		.item {
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			padding: 40rpx 0rpx 40rpx 20rpx;
			margin-bottom: 22rpx;

			.item-left {
				display: flex;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.item-right {
				display: flex;
				flex-direction: column;
				line-height: 46rpx;

				text:nth-child(1) {
					font-size: 30rpx;
					font-weight: 600;
					color: #333333;
				}

				text:nth-child(2) {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.btn {
			margin-top: 70rpx;
			width: 100%;

			button {
				flex: 1;
				border-radius: 46rpx;
				background: #4e8ef7;
				color: #FFFFFF;
				font-size: 30rpx;
				padding: 6rpx 0rpx;
			}
		}
	}
</style>
